import React from 'react';
import { Card, Tabs, Row, Col, Progress, Empty } from 'antd';
import CheckAddModal from '../CheckAddModal';
import { checkBook } from '@/services/Organization';
import styles from './index.less';

/* 
*  栏目块
*/
class Item extends React.Component {
  render() {
    const { info } = this.props;
    return (
      <Row align="middle" justify="space-between" className={styles.itemContainer}>
        <Col span={24} className={styles.title}>
          {info.name}
        </Col>
        <Col span={24} className={styles.progress}>
          <div>完成度：{info.finishRate + '%'}</div>
        </Col>
        <Col span={12}>
          <Progress percent={info.finishRate || 0} size="small" status="active" showInfo={false} />
        </Col>
        <Col span={24} className={styles.text}>
          {info.startDate + ' ~ ' + info.endDate}
        </Col>
        <Col span={24} className={styles.text}>
          {info.unitName}
        </Col>
      </Row>
    );
  }
}


class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: null,
      isLoading: false,
      list: []
    }
  }


  /* 监听父级数据变化 */
  static getDerivedStateFromProps(props, state) {
    const id = props.id;
    const preId = state.id;
    return id !== preId ? { id } : null;
  }

  componentDidUpdate(prevProps) {
    const id = this.state.id;
    prevProps.id !== id && id ? this.getCheckList(id) : null;
  }

  /* 获取table列表数据 */
  getCheckList = async (id) => {
    try {
      this.setState({ isLoading: true });
      const res = await checkBook(id);
      this.setState({
        list: res.map(function (item) {
          const startDate = item.startDate.split(' ');
          const endDate = item.endDate.split(' ');
          return {
            id: item.id,
            name: item.name,
            finishRate: item.schoolNum && item.schoolNum !== 0 ? ((item.finishSchoolNum / item.schoolNum) * 100).toFixed(2) : '0.00',
            startDate: startDate[0],
            endDate: endDate[0],
            unitName: item.unitName
          }
        })
      })
    } catch (e) {
      console.log('Organization:', e)
    } finally {
      this.setState({ isLoading: false })
    }
  }

  render() {
    const { isLoading, list, id } = this.state;
    const { getCheckList } = this;
    return (
      <Card
        title="清查任务"
        loading={isLoading}
        extra={<CheckAddModal add={() => { getCheckList(id) }}>任务下发</CheckAddModal>}>
        {
          list.length === 0
            ?
            <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
            :
            <Tabs defaultActiveKey="1" tabBarGutter="16" className={styles.tabsContainer}>
              {list.map((i) => (
                <Tabs.TabPane tab={<Item info={i} />} key={i.id} disabled={i === 10}></Tabs.TabPane>
              ))}
            </Tabs>
        }

      </Card>
    );
  }
}
export default Check;
